import { EditableProTable, ProColumns, ProFormInstance } from "@ant-design/pro-components";
import { Button, Checkbox, Divider, FormInstance, Tag } from "antd";
import React, { FC, useRef, useState } from "react";
import { colDataProps } from "../model";
import { useModel } from "@umijs/max";


const FieldList: FC = () => {
    const {
        fieldInfoList,
        setFieldInfoList,
        editableKeys,
        setEditableRowKeys,
        addRow,
        deleteItem,
        canEditFieldInfo
    } = useModel('TableInfo.model', (model) => ({
        fieldInfoList: model.fieldInfoList,
        setFieldInfoList: model.setFieldInfoList,
        editableKeys: model.editableKeys,
        setEditableRowKeys: model.setEditableRowKeys,
        addRow: model.addRow,
        deleteItem: model.deleteItem,
        canEditFieldInfo: model.canEditFieldInfo

    }));


    const columns: ProColumns<colDataProps>[] = [
        {
            title: '操作',
            // valueType: 'option',
            width: 90,
            editable: false,
            render: (a, b, c) => {
                return <>
                    <span className="d_icon" onClick={() => deleteItem(c)}>删除</span>
                    <Divider type="vertical" />
                    <span className="e_icon" onClick={() => canEditFieldInfo(b.id!)}>编辑</span>
                </>;
            },
        },
        {
            title: 'id',
            dataIndex: 'id',
            editable: false,
            width: 120,
        },
        {
            title: '字段代码',
            dataIndex: 'code',
            width: 130,
        },
        {
            title: '字段名称',
            dataIndex: 'name',
            width: 150,
        },

        {
            title: '数据类型',
            dataIndex: 'dataType',
            width: 120,
            valueType: 'select',
            valueEnum: {
                varchar: {
                    text: 'varchar',
                },
                datetime: {
                    text: 'datetime',
                },
                int: {
                    text: 'int',
                },
                bigint: {
                    text: 'bigint',
                },
                tinyint: {
                    text: 'tinyint',
                },
                text: {
                    text: 'text',
                },

                dec: {
                    text: 'dec',
                },
                time: {
                    text: 'time',
                },
                date: {
                    text: 'date',
                },
                longtext: {
                    text: 'bigint',
                },

            },
        },
        {
            title: '数据长度',
            dataIndex: 'dataTypeLength',
            width: 100,
            valueType: "digit"


        },
        {
            title: '主键',
            dataIndex: 'isKey',
            valueType: 'checkbox',
            width: 60,
            formItemProps: {
                getValueFromEvent: (e) => { return Number(e.target.checked) },
                valuePropName: 'checked'
            },
            renderFormItem(schema, config, form, action) {
                return <Checkbox />
            },
            render(dom, entity, index, action, schema) {
                return entity.isKey == 1 ? <Tag color="#108ee9">是</Tag> : <></>
            },
        },
        {
            title: '可为空',
            dataIndex: 'isNull',
            width: 60,
            valueType: 'checkbox',
            formItemProps: {
                getValueFromEvent: (e) => { return Number(e.target.checked) },
                valuePropName: 'checked'
            },
            renderFormItem(schema, config, form, action) {
                return <Checkbox />
            },
            render(dom, entity, index, action, schema) {
                return entity.isNull == 1 ? <Tag color="#108ee9">是</Tag> : <></>
            },
        },

        {
            title: '默认值',
            dataIndex: 'defaultValue',
            width: 80,
        },

        {
            title: '插入',
            dataIndex: 'isInsert',
            width: 60,
            valueType: 'checkbox',
            formItemProps: {
                getValueFromEvent: (e) => { return Number(e.target.checked) },
                valuePropName: 'checked'
            },
            renderFormItem(schema, config, form, action) {
                return <Checkbox />
            },
            render(dom, entity, index, action, schema) {
                return entity.isInsert == 1 ? <Tag color="#108ee9">是</Tag> : <></>
            },
        },
        {
            title: '编辑',
            dataIndex: 'isEdit',
            width: 60,
            valueType: 'checkbox',
            formItemProps: {
                getValueFromEvent: (e) => { return Number(e.target.checked) },
                valuePropName: 'checked'
            },
            renderFormItem(schema, config, form, action) {
                return <Checkbox />
            },
            render(dom, entity, index, action, schema) {
                return entity.isEdit == 1 ? <Tag color="#108ee9">是</Tag> : <></>
            },
        },
        {
            title: '列表',
            dataIndex: 'isList',
            width: 60,
            valueType: 'checkbox',
            formItemProps: {
                getValueFromEvent: (e) => { return Number(e.target.checked) },
                valuePropName: 'checked'
            },
            renderFormItem(schema, config, form, action) {
                return <Checkbox />
            },
            render(dom, entity, index, action, schema) {
                return entity.isList == 1 ? <Tag color="#108ee9">是</Tag> : <></>
            },
        },
        {
            title: '查询',
            dataIndex: 'isQuery',
            width: 60,
            valueType: 'checkbox',
            formItemProps: {
                getValueFromEvent: (e) => { return Number(e.target.checked) },
                valuePropName: 'checked'
            },
            renderFormItem(schema, config, form, action) {
                return <Checkbox />
            },
            render(dom, entity, index, action, schema) {
                return entity.isQuery == 1 ? <Tag color="#108ee9">是</Tag> : <></>
            },
        },
        {
            title: '查询方式',
            dataIndex: 'queryType',
            width: 80,
            valueType: 'select',
            valueEnum: {
                EQ: {
                    text: '=',
                },
                NE: {
                    text: '!=',
                },
                GT: {
                    text: '>',
                },
                GTE: {
                    text: '>=',
                },
                LT: {
                    text: '<',
                },
                LTE: {
                    text: '<=',
                },
                LIKE: {
                    text: 'LIKE',
                },
                BETWEEN: {
                    text: 'BETWEEN',
                },
            },
        },
        {
            title: '必填',
            dataIndex: 'isRequired',
            width: 60,
            valueType: 'checkbox',
            formItemProps: {
                getValueFromEvent: (e) => { return Number(e.target.checked) },
                valuePropName: 'checked'
            },
            renderFormItem(schema, config, form, action) {
                return <Checkbox />
            },
            render(dom, entity, index, action, schema) {
                return entity.isRequired == 1 ? <Tag color="#108ee9">是</Tag> : <></>
            },
        },
        {
            title: '显示类型',
            dataIndex: 'htmlType',
            width: 110,
            hideInSearch: true,
            valueType: 'select',
            valueEnum: {
                input: {
                    text: '文本框',
                },
                textarea: {
                    text: '文本域',
                },
                select: {
                    text: '下拉框',
                },
                radio: {
                    text: '单选框',
                },
                checkbox: {
                    text: '复选框',
                },
                datetime: {
                    text: '日期控件',
                },
                imageUpload: {
                    text: '图片上传',
                },
                fileUpload: {
                    text: '文件上传',
                },
                editor: {
                    text: '富文本控件',
                },
            },
        },
        // {
        //   title: '字典类型',
        //   dataIndex: 'dictType',
        //   hideInSearch: true,
        //   valueType: 'select',
        //   fieldProps: {
        //     options: dictData,
        //   },
        //   render: (text) => {
        //     return <Tag color="#108ee9">{text}</Tag>;
        //   },
        // },


    ];

    const onDataChange = (value: readonly any[]) => {
        setFieldInfoList({ ...value } as []);
    };
    return (
        <>
            <EditableProTable<colDataProps>
                rowKey="id"
                search={false}
                columns={columns}
                value={fieldInfoList}
                editable={{
                    type: 'multiple',
                    editableKeys,
                    onChange: setEditableRowKeys,
                    actionRender: (row, config, defaultDoms) => {
                        return [defaultDoms.delete];
                    },
                    onValuesChange: (record, recordList) => {
                        setFieldInfoList(recordList);
                    },
                }}
                onChange={onDataChange}
                recordCreatorProps={false}


            />
            &nbsp;
            <Button block color="default" variant="dashed" onClick={addRow}>+增加一行数据</Button>
        </>
    )
}
export default FieldList;